<script setup lang="ts">
import { useViewer } from './stores/viewer';
import { onMounted, markRaw } from 'vue';
import TopToolBar from './views/TopToolBar.vue';
import EventBus from './common/EventBus';

const store = useViewer();

onMounted(async () => {
  const url = '/static/scene.json';

  const options = {
    operationallayers1: [
      {
        id: 10056,
        name: 'road',
        type: 'geojson',
        url: './data/layer/Export_Output_4.json'
      },
      {
        id: 10053,
        name: 'roadqwqwwqw',
        type: 'geojson',
        url: './data/layer/Export_Output_4.json'
      }
    ]
  };

  const viewer: any = await zz3d.createMapEx('cesiumContainer', url, options);

  (window as any).viewer = viewer;
  const rawViewer = markRaw(viewer);
  store.setViewer(rawViewer);

  // 恢复上次退出时视图
  const cameraViewObj = localStorage.getItem('cameraView');
  if (cameraViewObj) {
    const obj = JSON.parse(cameraViewObj);
    viewer.zz.centerAt(obj, { duration: 0 });
  }

  //相机变换时,记录位置
  viewer.camera.moveEnd.addEventListener(function () {
    const obj = viewer.zz.getCameraView();
    localStorage.setItem('cameraView', JSON.stringify(obj));
    // viewer.cameraViews.unshift(obj);
    // if (viewer.cameraViews.length > 30) {
    //   viewer.cameraViews.pop();
    // }
  });

  EventBus.emit('sceneLoaded', {});
});
</script>

<template>
  <TopToolBar></TopToolBar>
  <div id="allViewContainer" class="all-container">
    <div id="cesiumContainer"></div>
  </div>
</template>

<style scoped>
.all-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
}

#cesiumContainer {
  height: 100%;
  width: 0;
  flex: 1;
}
</style>
